<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 600px;
      height: 800px;
      background-color: gray;
      position: relative;
      background-image: url(./c1.jpg);
      background-size: 100% 100%;
    }

    .sub {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      /* left: 100px;
      top: 200px; */
      background-image: url(./BO1.jpg);
      background-size: 100% 100%;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="sub"></div>
  </div>
</body>
<script>
  var wrap = document.querySelector('.wrap');
  var sub = document.querySelector('.sub');
  var maxLeft = wrap.clientWidth - sub.clientWidth;
  var maxTop = wrap.clientHeight - sub.clientHeight;

  var isLeftPress = false;
  var isRightPress = false;
  var isUpPress = false;
  var isDownPress = false;


  document.onkeydown = function (e) {
    var e = e || window.event;
    var keyCode = e.which || e.keyCode;
    console.log(e.key, e.keyCode);

    if (keyCode == 37 || keyCode == 65) { //左
      isLeftPress = true;
    } else if (keyCode == 38 || keyCode == 87) { //上
      isUpPress = true;
    } else if (keyCode == 39 || keyCode == 68) { //右
      isRightPress = true;
    } else if (keyCode == 40 || keyCode == 83) { //下
      isDownPress = true;
    }

    var x;
    var y;
    var speed = 10;
    if (keyCode == 37 || keyCode == 65) {//左
      console.log('左');
      x = sub.offsetLeft - speed;
    } else if (keyCode == 38 || keyCode == 87) {//上
      console.log('上');
      y = sub.offsetTop - speed;
    } else if (keyCode == 39 || keyCode == 68) {//右
      console.log('右');
      x = sub.offsetLeft + speed;
    } else if (keyCode == 40 || keyCode == 83) {//下
      console.log('下');
      y = sub.offsetTop + speed;
    }
    if (x < 0) x = 0;
    if (x > maxLeft) x = maxLeft;
    if (y < 0) y = 0;
    if (y > maxTop) y = maxTop;


    // console.log(x, y);
    sub.style.left = x + 'px';
    sub.style.top = y + 'px';
  }

  document.onkeyup = function (e) {
    var e = e || window.event;
    var keyCode = e.which || e.keyCode;
    console.log(e.key, keyCode);


    if (keyCode == 37 || keyCode == 65) { //左
      isLeftPress = false;
    } else if (keyCode == 38 || keyCode == 87) { //上
      isUpPress = false;
    } else if (keyCode == 39 || keyCode == 68) { //右
      isRightPress = false;
    } else if (keyCode == 40 || keyCode == 83) { //下
      isDownPress = false;
    }
  }

  move();

  function move() {
    timer = setInterval(function () {
      console.log(111111111);
      var x;
      var y;
      var speed = 10;
      if (isLeftPress) { //左
        console.log("左");
        x = sub.offsetLeft - speed;
      }
      if (isUpPress) { //上
        console.log("上");
        y = sub.offsetTop - speed;
      }
      if (isRightPress) { //右
        console.log("右");
        x = sub.offsetLeft + speed;
      }
      if (isDownPress) { //下
        console.log("下");
        y = sub.offsetTop + speed;
      }

      // 移动之前判断 是否超出临界值 (小于最小值  大于最大值)
      if (x < 0) x = 0;
      if (x > maxLeft) x = maxLeft;
      if (y < 0) y = 0;
      if (y > maxTop) y = maxTop;

      sub.style.left = x + "px";
      sub.style.top = y + "px";
    }, 100)
  }
</script>

</html>